<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BPB Panel v__VERSION__</title>
    <link rel="icon" href="/favicon.ico" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=add_circle,autorenew,check_circle,content_copy,delete,download,fingerprint,info,key_vertical,open_in_new,qr_code,settings,share,terminal,tune,verified,visibility,visibility_off&display=block" />
    __STYLE__
</head>

<body>
    <h1>
        <img class="icon" src="/favicon.ico" alt="BPB Logo"> BPB Panel <span id="panel-version"
            style="font-size: smaller;">
            v__VERSION__
        </span>
    </h1>
    <div class="form-container container">
        <h2><span class="material-symbols-rounded">settings</span> Settings</h2>
        <form id="configForm" class="configForm" onsubmit="updateSettings(event)">
            <details class="details">
                <summary>
                    <h3>VLESS - Trojan
                        <a href="https://bia-pain-bache.github.io/BPB-Worker-Panel/configuration/vless-trojan/"
                            target="_blank" title="Help">
                            <span class="material-symbols-rounded">info</span>
                        </a>
                    </h3>
                </summary>
                <div class="section">
                    <div class="form-control">
                        <label for="remoteDNS">🌏 Remote DNS</label>
                        <div>
                            <input type="text" id="remoteDNS" name="remoteDNS" required>
                        </div>
                    </div>
                    <div class="form-control">
                        <label for="localDNS">🏚️ Local DNS</label>
                        <div>
                            <input type="text" id="localDNS" name="localDNS" required>
                        </div>
                    </div>
                    <div class="form-control">
                        <label for="VLTRFakeDNS">🧢 Fake DNS</label>
                        <div>
                            <select id="VLTRFakeDNS" name="VLTRFakeDNS">
                                <option value="true">Enabled</option>
                                <option value="false">Disabled</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-control">
                        <label for="outProxy">✈️ Chain Proxy</label>
                        <div>
                            <input type="text" id="outProxy" name="outProxy">
                        </div>
                    </div>
                    <div class="form-control">
                        <label for="cleanIPs">
                            ✨ Clean IPs / Domains
                            <a class="scanner" href="https://github.com/bia-pain-bache/Cloudflare-Clean-IP-Scanner"
                                title="Scanner" target="_blank" rel="noopener noreferrer">
                                <span class="material-symbols-rounded">open_in_new</span>
                            </a>
                        </label>
                        <div>
                            <textarea type="text" id="cleanIPs" name="cleanIPs" rows="1"></textarea>
                        </div>
                    </div>
                    <div class="form-control">
                        <label for="VLTRenableIPv6">🔛 IPv6</label>
                        <div>
                            <select id="VLTRenableIPv6" name="VLTRenableIPv6">
                                <option value="true">Enabled</option>
                                <option value="false">Disabled</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-control">
                        <label for="VLConfigs">⚙️ Protocols</label>
                        <div>
                            <div class="protocols inner-container">
                                <div class="proto">
                                    <input type="checkbox" id="VLConfigs" name="VLConfigs" value="true"
                                        onchange="handleProtocolChange(event)">
                                    <label for="VLConfigs">VLESS</label>
                                </div>
                                <div class="proto">
                                    <input type="checkbox" id="TRConfigs" name="TRConfigs" value="true"
                                        onchange="handleProtocolChange(event)">
                                    <label for="TRConfigs">Trojan</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-control">
                        <label for="tls-ports">🔒 TLS Ports</label>
                        <div>
                            <div id="tls-ports" class="rules inner-container"></div>
                        </div>
                    </div>
                    <div id="none-tls" class="form-control" style="display: none;">
                        <label for="non-tls-ports">🔓 None TLS Ports</label>
                        <div>
                            <div id="non-tls-ports" class="rules inner-container"></div>
                        </div>
                    </div>
                    <div class="form-control">
                        <label for="fingerprint">👆 Fingerprint</label>
                        <div>
                            <select id="fingerprint" name="fingerprint">
                                <option value="chrome">chrome</option>
                                <option value="firefox">firefox</option>
                                <option value="safari">safari</option>
                                <option value="ios">ios</option>
                                <option value="android">android</option>
                                <option value="edge">edge</option>
                                <option value="360">360</option>
                                <option value="qq">qq</option>
                                <option value="random">random</option>
                                <option value="randomized">randomized</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-control">
                        <label for="bestVLTRInterval">🔄 Best Interval</label>
                        <div>
                            <input type="number" id="bestVLTRInterval" name="bestVLTRInterval" min="10" max="90">
                        </div>
                    </div>
                    <div class="container">
                        <div class="section">
                            <h4><span class="material-symbols-rounded">tune</span> Proxy IP</h4>
                            <div class="form-control">
                                <label for="proxyIPMode">🎚️ Mode</label>
                                <div>
                                    <select id="proxyIPMode" name="proxyIPMode">
                                        <option value="proxyip">Proxy IP</option>
                                        <option value="prefix">NAT64</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-control">
                                <label for="proxyIPs">
                                    📍 Proxy IPs / Domains
                                    <a class="scanner"
                                        href="https://www.nslookup.io/domains/bpb.yousef.isegaro.com/dns-records/"
                                        title="Proxy IPs" target="_blank" rel="noopener noreferrer">
                                        <span class="material-symbols-rounded">open_in_new</span>
                                    </a>
                                </label>
                                <div>
                                    <textarea type="text" id="proxyIPs" name="proxyIPs" rows="1"></textarea>
                                </div>
                            </div>
                            <div class="form-control">
                                <label for="prefixes">
                                    📍 NAT64 Prefixes
                                    <a class="scanner"
                                        href="https://github.com/bia-pain-bache/BPB-Worker-Panel/blob/main/NAT64Prefixes.md"
                                        title="NAT64 prefixes" target="_blank" rel="noopener noreferrer">
                                        <span class="material-symbols-rounded">open_in_new</span>
                                    </a>
                                </label>
                                <div>
                                    <textarea type="text" id="prefixes" name="prefixes" rows="1"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container">
                        <div class="section">
                            <h4><span class="material-symbols-rounded">tune</span> Custom CDN</h4>
                            <div class="form-control">
                                <label for="customCdnAddrs">💀 Addresses</label>
                                <div>
                                    <textarea type="text" id="customCdnAddrs" name="customCdnAddrs" rows="1"></textarea>
                                </div>
                            </div>
                            <div class="form-control">
                                <label for="customCdnHost">💀 Host</label>
                                <div>
                                    <input type="text" id="customCdnHost" name="customCdnHost">
                                </div>
                            </div>
                            <div class="form-control">
                                <label for="customCdnSni">💀 SNI</label>
                                <div>
                                    <input type="text" id="customCdnSni" name="customCdnSni">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </details>
            <details>
                <summary>
                    <h3>Xray Fragment
                        <a href="https://bia-pain-bache.github.io/BPB-Worker-Panel/configuration/fragment/"
                            target="_blank" title="Help">
                            <span class="material-symbols-rounded">info</span>
                        </a>
                    </h3>
                </summary>
                <div class="section">
                    <div class="form-control">
                        <label for="fragmentMode">🎚️ Mode</label>
                        <div>
                            <select id="fragmentMode" name="fragmentMode" onchange="handleFragmentMode()">
                                <option value="custom">Custom</option>
                                <option value="low">Low</option>
                                <option value="medium">Medium</option>
                                <option value="high">High</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-control">
                        <label for="fragmentLengthMin">📐 Length</label>
                        <div class="min-max">
                            <input type="number" id="fragmentLengthMin" name="fragmentLengthMin" min="10" required>
                            <span>-</span>
                            <input type="number" id="fragmentLengthMax" name="fragmentLengthMax" max="500" required>
                        </div>
                    </div>
                    <div class="form-control">
                        <label for="fragmentIntervalMin">🕞 Interval</label>
                        <div class="min-max">
                            <input type="number" id="fragmentIntervalMin" name="fragmentIntervalMin" min="1" max="30"
                                required>
                            <span>-</span>
                            <input type="number" id="fragmentIntervalMax" name="fragmentIntervalMax" min="1" max="30"
                                required>
                        </div>
                    </div>
                    <div class="form-control">
                        <label for="fragmentPackets">📦 Packets</label>
                        <div>
                            <select id="fragmentPackets" name="fragmentPackets">
                                <option value="tlshello">tlshello</option>
                                <option value="1-1">1-1</option>
                                <option value="1-2">1-2</option>
                                <option value="1-3">1-3</option>
                                <option value="1-5">1-5</option>
                            </select>
                        </div>
                    </div>
                </div>
            </details>
            <details>
                <summary>
                    <h3>Warp General
                        <a href="https://bia-pain-bache.github.io/BPB-Worker-Panel/configuration/warp/" target="_blank"
                            title="Help">
                            <span class="material-symbols-rounded">info</span>
                        </a>
                    </h3>
                </summary>
                <div class="section">
                    <div class="form-control">
                        <label for="warpEndpoints">
                            ✨ Endpoints
                            <a class="scanner" href="https://github.com/bia-pain-bache/BPB-Warp-Scanner" title="Scanner"
                                target="_blank" rel="noopener noreferrer">
                                <span class="material-symbols-rounded">open_in_new</span>
                            </a>
                        </label>
                        <div>
                            <textarea type="text" id="warpEndpoints" name="warpEndpoints" rows="1" required></textarea>
                        </div>
                    </div>
                    <div class="form-control">
                        <label for="warpFakeDNS">🧢 Fake DNS</label>
                        <div>
                            <select id="warpFakeDNS" name="warpFakeDNS">
                                <option value="true">Enabled</option>
                                <option value="false">Disabled</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-control">
                        <label for="warpEnableIPv6">🔛 IPv6</label>
                        <div>
                            <select id="warpEnableIPv6" name="warpEnableIPv6">
                                <option value="true">Enabled</option>
                                <option value="false">Disabled</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-control">
                        <label for="bestWarpInterval">🔄 Best Interval</label>
                        <div>
                            <input type="number" id="bestWarpInterval" name="bestWarpInterval" min="10" max="90">
                        </div>
                    </div>
                    <div class="form-control">
                        <label for="refreshBtn">♻️ Warp Accounts</label>
                        <div>
                            <button type="button" class="button reverse" onclick="updateWarpConfigs()">
                                Update<span id="warp-update" class="material-symbols-rounded">autorenew</span>
                            </button>
                        </div>
                    </div>
                </div>
            </details>
            <details>
                <summary>
                    <h3>Warp PRO
                        <a href="https://bia-pain-bache.github.io/BPB-Worker-Panel/configuration/warp-pro/"
                            target="_blank" title="Help">
                            <span class="material-symbols-rounded">info</span>
                        </a>
                    </h3>
                </summary>
                <div class="section">
                    <div class="container">
                        <div class="section">
                            <h4><span class="material-symbols-rounded">tune</span> MahsaNG Noise</h4>
                            <div class="form-control">
                                <label for="knockerNoiseMode">😵‍💫 Mode</label>
                                <div>
                                    <input type="text" id="knockerNoiseMode" name="knockerNoiseMode"
                                        title="Fill in 'none', 'quic', 'random', or any HEX string like 'ee0000000108aaaa'"
                                        required>
                                </div>
                            </div>
                            <div class="form-control">
                                <label for="noiseCountMin">🎚️ Count</label>
                                <div class="min-max">
                                    <input type="number" id="noiseCountMin" name="noiseCountMin" min="1" required>
                                    <span>-</span>
                                    <input type="number" id="noiseCountMax" name="noiseCountMax" min="1" required>
                                </div>
                            </div>
                            <div class="form-control">
                                <label for="noiseSizeMin">📏 Size</label>
                                <div class="min-max">
                                    <input type="number" id="noiseSizeMin" name="noiseSizeMin" min="1" required>
                                    <span>-</span>
                                    <input type="number" id="noiseSizeMax" name="noiseSizeMax" min="1" required>
                                </div>
                            </div>
                            <div class="form-control">
                                <label for="noiseDelayMin">🕞 Delay</label>
                                <div class="min-max">
                                    <input type="number" id="noiseDelayMin" name="noiseDelayMin" min="1" required>
                                    <span>-</span>
                                    <input type="number" id="noiseDelayMax" name="noiseDelayMax" min="1" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container">
                        <div class="section">
                            <h4><span class="material-symbols-rounded">tune</span> Clash - Amnezia Noise</h4>
                            <div class="form-control">
                                <label for="amneziaNoiseCount">🎚️ Count</label>
                                <div>
                                    <input type="number" id="amneziaNoiseCount" name="amneziaNoiseCount" min="1"
                                        required>
                                </div>
                            </div>
                            <div class="form-control">
                                <label for="amneziaNoiseSizeMin">📏 Size</label>
                                <div class="min-max">
                                    <input type="number" id="amneziaNoiseSizeMin" name="amneziaNoiseSizeMin" min="1"
                                        required>
                                    <span>-</span>
                                    <input type="number" id="amneziaNoiseSizeMax" name="amneziaNoiseSizeMax" min="1"
                                        required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="udp-noise-container" class="container">
                        <div class="header-container">
                            <h4><span class="material-symbols-rounded">tune</span> v2rayNG - v2rayN Noise</h4>
                            <button type="button" class="add-noise" onclick="addUdpNoise(true)">
                                <span class="material-symbols-rounded">add_circle</span>
                            </button>
                        </div>
                        <div id="noises" class="section"></div>
                    </div>
                </div>
            </details>
            <details>
                <summary>
                    <h3>Routing Rules
                        <a href="https://bia-pain-bache.github.io/BPB-Worker-Panel/configuration/routing-rules/"
                            target="_blank" title="Help">
                            <span class="material-symbols-rounded">info</span>
                        </a>
                    </h3>
                </summary>
                <div class="section">
                    <div class="container">
                        <h4><span class="material-symbols-rounded">tune</span> Preset Rules</h4>
                        <div class="form-control">
                            <label for="bypass-rules">🟩 Bypass rules</label>
                            <div>
                                <div id="bypass-rules" class="rules inner-container">
                                    <div class="routing">
                                        <input type="checkbox" id="bypassIran" name="bypassIran" value="true">
                                        <label for="bypassIran">Iran</label>
                                    </div>
                                    <div class="routing">
                                        <input type="checkbox" id="bypassChina" name="bypassChina" value="true">
                                        <label for="bypassChina">China</label>
                                    </div>
                                    <div class="routing">
                                        <input type="checkbox" id="bypassRussia" name="bypassRussia" value="true">
                                        <label for="bypassRussia">Russia</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-control">
                            <label for="block-rules">🟥 Block rules</label>
                            <div>
                                <div id="block-rules" class="rules inner-container">
                                    <div class="routing">
                                        <input type="checkbox" id="blockAds" name="blockAds" value="true">
                                        <label for="blockAds">Ads.</label>
                                    </div>
                                    <div class="routing">
                                        <input type="checkbox" id="blockPorn" name="blockPorn" value="true">
                                        <label for="blockPorn">Porn</label>
                                    </div>
                                    <div class="routing">
                                        <input type="checkbox" id="blockUDP443" name="blockUDP443" value="true">
                                        <label for="blockUDP443">QUIC</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container">
                        <h4><span class="material-symbols-rounded">tune</span> Custom Rules</h4>
                        <div class="form-control">
                            <label for="customBypassRules">🟩 Bypass IPs / Domains</label>
                            <div>
                                <textarea type="text" id="customBypassRules" name="customBypassRules"
                                    rows="1"></textarea>
                            </div>
                        </div>
                        <div class="form-control">
                            <label for="customBlockRules">🟥 Block IPs / Domains</label>
                            <div>
                                <textarea type="text" id="customBlockRules" name="customBlockRules" rows="1"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="container">
                        <h4><span class="material-symbols-rounded">tune</span> Sanction Rules</h4>
                        <div class="form-control">
                            <label for="antiSanctionDNS">🌏 Anti Sanction DNS</label>
                            <div>
                                <input type="text" id="antiSanctionDNS" name="antiSanctionDNS" required>
                            </div>
                        </div>
                        <div class="form-control">
                            <label for="bypass-sanction-rules">🟩 Bypass rules</label>
                            <div>
                                <div id="bypass-sanction-rules" class="rules inner-container">
                                    <div class="routing">
                                        <input type="checkbox" id="bypassOpenAi" name="bypassOpenAi" value="true">
                                        <label for="bypassOpenAi">ChatGPT</label>
                                    </div>
                                    <div class="routing">
                                        <input type="checkbox" id="bypassMicrosoft" name="bypassMicrosoft" value="true">
                                        <label for="bypassMicrosoft">Microsoft</label>
                                    </div>
                                    <div class="routing">
                                        <input type="checkbox" id="bypassOracle" name="bypassOracle" value="true">
                                        <label for="bypassOracle">Oracle</label>
                                    </div>
                                    <div class="routing">
                                        <input type="checkbox" id="bypassDocker" name="bypassDocker" value="true">
                                        <label for="bypassDocker">Docker</label>
                                    </div>
                                    <div class="routing">
                                        <input type="checkbox" id="bypassAdobe" name="bypassAdobe" value="true">
                                        <label for="bypassAdobe">Adobe</label>
                                    </div>
                                    <div class="routing">
                                        <input type="checkbox" id="bypassEpicGames" name="bypassEpicGames" value="true">
                                        <label for="bypassEpicGames">Epic Games</label>
                                    </div>
                                    <div class="routing">
                                        <input type="checkbox" id="bypassIntel" name="bypassIntel" value="true">
                                        <label for="bypassIntel">Intel</label>
                                    </div>
                                    <div class="routing">
                                        <input type="checkbox" id="bypassAmd" name="bypassAmd" value="true">
                                        <label for="bypassAmd">AMD</label>
                                    </div>
                                    <div class="routing">
                                        <input type="checkbox" id="bypassNvidia" name="bypassNvidia" value="true">
                                        <label for="bypassNvidia">Nvidia</label>
                                    </div>
                                    <div class="routing">
                                        <input type="checkbox" id="bypassAsus" name="bypassAsus" value="true">
                                        <label for="bypassAsus">Asus</label>
                                    </div>
                                    <div class="routing">
                                        <input type="checkbox" id="bypassHp" name="bypassHp" value="true">
                                        <label for="bypassHp">HP</label>
                                    </div>
                                    <div class="routing">
                                        <input type="checkbox" id="bypassLenovo" name="bypassLenovo" value="true">
                                        <label for="bypassLenovo">Lenovo</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-control">
                            <label for="customBypassSanctionRules">🟩 Bypass Domains</label>
                            <div>
                                <textarea type="text" id="customBypassSanctionRules" name="customBypassSanctionRules"
                                    rows="1"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </details>
            <div id="apply" class="form-control apply">
                <button type="submit" id="applyButton" class="button disabled apply-settings" form="configForm">
                    Apply <span class="material-symbols-rounded">check_circle</span>
                </button>
                <button type="button" class="panel-settings" title="Reset panel settings to default"
                    onclick="resetSettings()">
                    <i id="refresh-btn" class="fa fa-refresh fa-2x" aria-hidden="true"></i>
                </button>
                <button type="button" class="panel-settings" title="Export panel settings" onclick="exportSettings()">
                    <i class="fa fa-cloud-download fa-2x" aria-hidden="true"></i>
                </button>
                <button type="button" class="panel-settings" title="Import panel settings" onclick="importSettings()">
                    <i class="fa fa-cloud-upload fa-2x" aria-hidden="true"></i>
                    <input type="file" id="fileInput" accept=".dat" style="display: none;"
                        onchange="uploadSettings(event)" />
                </button>
            </div>
        </form>
    </div>
    <div class="form-container container">
        <h2><span class="material-symbols-rounded">share</span> Subscriptions</h2>
        <details>
            <summary>
                <h3>Normal
                    <a href="https://bia-pain-bache.github.io/BPB-Worker-Panel/usage/normal/" target="_blank"
                        title="Help">
                        <span class="material-symbols-rounded">info</span>
                    </a>
                </h3>
            </summary>
            <div class="table-container">
                <table id="full-normal-configs-table">
                    <tr>
                        <td>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>v2rayNG</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>MahsaNG</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>v2rayN</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>v2rayN-PRO</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>Streisand</span>
                            </div>
                        </td>
                        <td>
                            <button title="Display QR code"
                                onclick="openQR('normal', 'xray', 'Normal', 'Normal Subscription')">
                                <span class="material-symbols-rounded">qr_code</span>
                            </button>
                            <button title="Copy subscription URL" onclick="subURL('normal', 'xray', 'Normal')">
                                <span class="material-symbols-rounded">content_copy</span>
                            </button>
                            <button title="Download config" onclick="dlURL('normal', 'xray')">
                                <span class="material-symbols-rounded">download</span>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>sing-box</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>v2rayN (sing-box)</span>
                            </div>
                        </td>
                        <td>
                            <button title="Display QR code"
                                onclick="openQR('normal', 'sing-box', 'Normal', 'Normal Subscription', true)">
                                <span class="material-symbols-rounded">qr_code</span>
                            </button>
                            <button title="Copy subscription URL" onclick="subURL('normal', 'sing-box', 'Normal')">
                                <span class="material-symbols-rounded">content_copy</span>
                            </button>
                            <button title="Download config" onclick="dlURL('normal', 'sing-box')">
                                <span class="material-symbols-rounded">download</span>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>Clash Meta</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>Clash Verge</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>FlClash</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>Stash</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>v2rayN (mihomo)</span>
                            </div>
                        </td>
                        <td>
                            <button title="Display QR code"
                                onclick="openQR('normal', 'clash', 'Normal', 'Normal Subscription')">
                                <span class="material-symbols-rounded">qr_code</span>
                            </button>
                            <button title="Copy subscription URL" onclick="subURL('normal', 'clash', 'Normal')">
                                <span class="material-symbols-rounded">content_copy</span>
                            </button>
                            <button title="Download config" onclick="dlURL('normal', 'clash')">
                                <span class="material-symbols-rounded">download</span>
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        </details>
        <details>
            <summary>
                <h3>Fragment
                    <a href="https://bia-pain-bache.github.io/BPB-Worker-Panel/usage/fragment/" target="_blank"
                        title="Help">
                        <span class="material-symbols-rounded">info</span>
                    </a>
                </h3>
            </summary>
            <div class="table-container">
                <table id="frag-sub-table">
                    <tr>
                        <td>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>v2rayNG</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>MahsaNG</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>v2rayN</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>v2rayN-PRO</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>Streisand</span>
                            </div>
                        </td>
                        <td>
                            <button title="Display QR code"
                                onclick="openQR('fragment', 'xray', 'Fragment', 'Fragment Subscription')">
                                <span class="material-symbols-rounded">qr_code</span>
                            </button>
                            <button title="Copy subscription URL" onclick="subURL('fragment', 'xray', 'Fragment')">
                                <span class="material-symbols-rounded">content_copy</span>
                            </button>
                            <button title="Download config" onclick="dlURL('fragment', 'xray')">
                                <span class="material-symbols-rounded">download</span>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>sing-box</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>v2rayN (sing-box)</span>
                            </div>
                        </td>
                        <td>
                            <button title="Display QR code"
                                onclick="openQR('fragment', 'sing-box', 'Fragment', 'Fragment Subscription', true)">
                                <span class="material-symbols-rounded">qr_code</span>
                            </button>
                            <button title="Copy subscription URL" onclick="subURL('fragment', 'sing-box', 'Fragment')">
                                <span class="material-symbols-rounded">content_copy</span>
                            </button>
                            <button title="Download config" onclick="dlURL('fragment', 'sing-box')">
                                <span class="material-symbols-rounded">download</span>
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        </details>
        <details>
            <summary>
                <h3>Warp
                    <a href="https://bia-pain-bache.github.io/BPB-Worker-Panel/usage/warp/" target="_blank"
                        title="Help">
                        <span class="material-symbols-rounded">info</span>
                    </a>
                </h3>
            </summary>
            <div class="table-container">
                <table id="warp-configs-table">
                    <tr>
                        <td>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>v2rayNG</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>v2rayN</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>Streisand</span>
                            </div>
                        </td>
                        <td>
                            <button title="Display QR code"
                                onclick="openQR('warp', 'xray', 'Warp', 'Warp Subscription')">
                                <span class="material-symbols-rounded">qr_code</span>
                            </button>
                            <button title="Copy subscription URL" onclick="subURL('warp', 'xray', 'Warp')">
                                <span class="material-symbols-rounded">content_copy</span>
                            </button>
                            <button title="Download config" onclick="dlURL('warp', 'xray')">
                                <span class="material-symbols-rounded">download</span>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>sing-box</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>v2rayN (sing-box)</span>
                            </div>
                        </td>
                        <td>
                            <button title="Display QR code"
                                onclick="openQR('warp', 'sing-box', 'Warp', 'Warp Subscription', true)">
                                <span class="material-symbols-rounded">qr_code</span>
                            </button>
                            <button title="Copy subscription URL" onclick="subURL('warp', 'sing-box', 'Warp')">
                                <span class="material-symbols-rounded">content_copy</span>
                            </button>
                            <button title="Download config" onclick="dlURL('warp', 'sing-box')">
                                <span class="material-symbols-rounded">download</span>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>Clash Meta</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>Clash Verge</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>FlClash</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>Stash</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>v2rayN (mihomo)</span>
                            </div>
                        </td>
                        <td>
                            <button title="Display QR code"
                                onclick="openQR('warp', 'clash', 'Warp', 'Warp Subscription')">
                                <span class="material-symbols-rounded">qr_code</span>
                            </button>
                            <button title="Copy subscription URL" onclick="subURL('warp', 'clash', 'Warp')">
                                <span class="material-symbols-rounded">content_copy</span>
                            </button>
                            <button title="Download config" onclick="dlURL('warp', 'clash')">
                                <span class="material-symbols-rounded">download</span>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>Wireguard</span>
                            </div>
                        </td>
                        <td>
                            <button title="Download configs zip" id="dlConfigsBtn" type="button"
                                onclick="downloadWarpConfigs(false)">
                                <span class="material-symbols-rounded">download</span>
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        </details>
        <details>
            <summary>
                <h3>Warp PRO
                    <a href="https://bia-pain-bache.github.io/BPB-Worker-Panel/usage/warp-pro/" target="_blank"
                        title="Help">
                        <span class="material-symbols-rounded">info</span>
                    </a>
                </h3>
            </summary>
            <div class="table-container">
                <table id="warp-pro-configs-table">
                    <tr>
                        <td>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>v2rayNG</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>v2rayN</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>Streisand</span>
                            </div>
                        </td>
                        <td>
                            <button title="Display QR code"
                                onclick="openQR('warp-pro', 'xray', 'Warp Pro', 'Warp Pro Subscription')">
                                <span class="material-symbols-rounded">qr_code</span>
                            </button>
                            <button title="Copy subscription URL" onclick="subURL('warp-pro', 'xray', 'Warp Pro')">
                                <span class="material-symbols-rounded">content_copy</span>
                            </button>
                            <button title="Download config" onclick="dlURL('warp-pro', 'xray')">
                                <span class="material-symbols-rounded">download</span>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>MahsaNG</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>v2rayN-PRO</span>
                            </div>
                        </td>
                        <td>
                            <button title="Display QR code"
                                onclick="openQR('warp-pro', 'xray-knocker', 'Warp Pro', 'Warp Pro Subscription')">
                                <span class="material-symbols-rounded">qr_code</span>
                            </button>
                            <button title="Copy subscription URL"
                                onclick="subURL('warp-pro', 'xray-knocker', 'Warp Pro')">
                                <span class="material-symbols-rounded">content_copy</span>
                            </button>
                            <button title="Download config" onclick="dlURL('warp-pro', 'xray-knocker')">
                                <span class="material-symbols-rounded">download</span>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>Clash Meta</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>Clash Verge</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>FlClash</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>Stash</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>v2rayN (mihomo)</span>
                            </div>
                        </td>
                        <td>
                            <button title="Display QR code"
                                onclick="openQR('warp-pro', 'clash', 'Warp Pro', 'Warp Pro Subscription')">
                                <span class="material-symbols-rounded">qr_code</span>
                            </button>
                            <button title="Copy subscription URL" onclick="subURL('warp-pro', 'clash', 'Warp Pro')">
                                <span class="material-symbols-rounded">content_copy</span>
                            </button>
                            <button title="Download config" onclick="dlURL('warp-pro', 'clash')">
                                <span class="material-symbols-rounded">download</span>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>Amnezia</span>
                            </div>
                            <div>
                                <span class="material-symbols-rounded">verified</span>
                                <span>WG Tunnel</span>
                            </div>
                        </td>
                        <td>
                            <button title="Download configs zip" id="dlAmneziaConfigsBtn" type="button"
                                onclick="downloadWarpConfigs(true)">
                                <span class="material-symbols-rounded">download</span>
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
        </details>
    </div>
    <div class="form-container container">
        <div id="resetPassModal" class="modal">
            <div class="modal-content">
                <span class="close" id="closeResetPass" onclick="closeResetPass()">&times;</span>
                <form id="passwordChangeForm" onsubmit="resetPassword(event)">
                    <h2>Change Password</h2>
                    <div class="section">
                        <div class="form-control">
                            <label for="newPassword">New Password</label>
                            <div class="password-wrapper">
                                <input type="password" id="newPassword" name="newPassword" required>
                                <span class="material-symbols-rounded toggle-password">
                                    visibility_off
                                </span>
                            </div>
                        </div>
                        <div class="form-control">
                            <label for="confirmPassword">Confirm Password</label>
                            <div class="password-wrapper">
                                <input type="password" id="confirmPassword" name="confirmPassword" required>
                                <span class="material-symbols-rounded toggle-password">
                                    visibility_off
                                </span>
                            </div>
                        </div>
                    </div>
                    <div id="passwordError" class="password-error"></div>
                    <button id="changePasswordBtn" type="submit" class="button">Change Password</button>
                </form>
            </div>
        </div>
        <div id="qrModal" class="modalQR">
            <div class="modal-content" class="modal-content">
                <div class="modal-header">
                    <span id="closeQR" class="close" onclick="closeQR()">&times;</span>
                    <span id="qrcodeTitle" class="qr-title"></span>
                </div>
                <div id="qrcode-container"></div>
            </div>
        </div>
        <div class="header-container">
            <h2><span class="material-symbols-rounded">fingerprint</span> My IP</h2>
            <button type="button" id="refresh-geo-location" class="refresh-geo-location" onclick="fetchIPInfo()">
                <i class="fa fa-refresh fa-2x refresh-my-ip" aria-hidden="true"></i>
            </button>
        </div>
        <div class="my-ip">
            <table id="ips" class="my-ip">
                <thead>
                    <th>Information</th>
                    <th>Cloudflare targets</th>
                    <th>Other targets</th>
                </thead>
                <tbody>
                    <tr>
                        <td>IP</td>
                        <td id="cf-ip"></td>
                        <td id="ip"></td>
                    </tr>
                    <tr>
                        <td>Country</td>
                        <td id="cf-country"></td>
                        <td id="country"></td>
                    </tr>
                    <tr>
                        <td>City</td>
                        <td id="cf-city"></td>
                        <td id="city"></td>
                    </tr>
                    <tr>
                        <td>ISP</td>
                        <td id="cf-isp"></td>
                        <td id="isp"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="footer-container">
        <div class="footer">
            <div class="github-container">
                <i class="fa fa-github"></i>
                <a class="link" id="github-link" href="https://github.com/bia-pain-bache/BPB-Worker-Panel"
                    target="_blank">Github</a>
            </div>
            <button id="openResetPass" class="button" onclick="openResetPass()">Change Password <span
                    class="material-symbols-rounded">key_vertical</span></button>
            <button type="button" id="logout" class="logout" title="Log out" onclick="logout(event)">
                <i class="fa fa-power-off fa-2x" aria-hidden="true"></i>
            </button>
        </div>
    </div>
    </div>
    <button id="darkModeToggle" class="floating-button" onclick="darkModeToggle()">
        <i id="modeIcon" class="fa fa-2x fa-adjust dark-mode" aria-hidden="true"></i>
    </button>

    <script type="module" defer>
        import { polyfillCountryFlagEmojis } from "https://cdn.skypack.dev/country-flag-emoji-polyfill";
        polyfillCountryFlagEmojis();
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script>__SCRIPT__</script>
</body>

</html>